<template>
	<view id="taskIntegral">
		<Header txt="任务赚积分" v-if="baidu"></Header>
		<HeaderB txt="任务赚积分" v-if="!baidu"></HeaderB>
		<view class="content">
			<view class="integral_sign_con">
			    <text class="integral_sign_text01">消费送积分</text>
			    <text class="integral_sign_text03">消费越多积分越多</text>
			</view>
			<view class="mySwiper_bg">
			  <view class="mySwiper_center">
			    <view class="integral_sign_tit clearfix">
			      <view class="recharge_con clearfix">
			        <text class="recharge_num"> 我的月度消费：{{ amount02 }}元 </text>
			        <text class="recharge_num02" @click="goPage('pagesA/user/walletPay')">
			          去充值 <text style="fontSize: 24rpx;">〉</text>
			        </text>
			      </view>
			    </view>
			  </view>
			  <view class="inter_list_center_text">
			    <view class="clearfix">					
			      <view class="prace_list ">
			        <text class="pracez_num">1000</text>
			        <text class="pracez_num">3000</text>
			        <text class="pracez_num">5000</text>
			        <text class="pracez_num">1万</text>
			        <text class="pracez_num">3万</text>
			        <text class="pracez_num">5万</text>
			        <text class="pracez_num" style="padding-right: 5px">10万</text><br>
			        <text class="pracez_icon">(金额)</text>
			      </view>
			      <view class="block">
					<image src="https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E5%9B%BE%E6%A0%87/%E8%BF%9B%E5%BA%A6%E6%9D%A1logo.png" :style="{left:left}" mode="aspectFit"></image>
					<progress :percent="amount" backgroundColor='#ffe6d4'  stroke-width="6">
					</progress>
			      </view>
			      <view class="prace_list prace_list02">
			        <text class="pracez_num">+1000</text>
			        <text class="pracez_num">3500</text>
			        <text class="pracez_num">6500</text>
			        <text class="pracez_num">1.5万</text>
			        <text class="pracez_num">4万</text>
			        <text class="pracez_num">8万</text>
			        <text class="pracez_num" style="padding-right: 5px">20万</text><br>
			        <text class="pracez_icon">(积分)</text>
			      </view>
			    </view>
			    <view class="sign_btn sign_btn02 clearfix">
			      <view
			        class="sign_btn_top sign_btn_top02"
			        @click="receivePoints(3)"
			        v-if="moneyInt == 2"
			      >
			        领取
			      </view>
			      <view
			        class="sign_btn_top sign_btn_top02 sign_btn_top03"
			        v-if="moneyInt == 1 || moneyInt == 3"
			      >
			        领取
			      </view>
			    </view>
			  </view>
			</view>      
			<view class="integral_sign_tit clearfix">
				<view class="integral_sign_con">
					<text class="integral_sign_text01">日常任务</text>
				</view>
			</view>
			<view class="mySwiper_bg">
			  <view class="mySwiper_center">
			    <view class="inter_list_center_text clearfix">
			      <view class="clearfix">
			        <view
			          class="task_list clearfix"
			          v-for="(item, index) in task"
			          :key="index"
			        >
			          <view class="task_list_img">
						<image src="https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E5%9B%BE%E6%A0%87/%E7%A7%AF%E5%88%86%E8%AE%A4%E8%AF%81.png" mode="aspectFit" v-if="item.id == 15"></image>
			            <image src="https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E5%9B%BE%E6%A0%87/%E7%A7%AF%E5%88%86%E8%B4%AD%E4%B9%B0.png" mode="aspectFit" v-if="item.id == 16"></image>
			            <image src="https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E5%9B%BE%E6%A0%87/%E7%A7%AF%E5%88%86%E9%82%80%E8%AF%B7.png" mode="aspectFit" v-if="item.id == 17"></image>
			            <image src="https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E5%9B%BE%E6%A0%87/%E7%A7%AF%E5%88%86%E6%B5%8F%E8%A7%88.png" mode="aspectFit" v-if="item.id == 18"></image>
			          </view>
			          <view class="task_list_add">
			            <view class="task_list_name">{{ item.channelName }}</view>
			            <view class="task_list_num">+{{ item.point }}</view>
			          </view>
			          <view class="task_list_right">
			            <view
			              class="task_list_btn"
			              v-show="item.isDone == 1"
			              @click="receivePoints(2, item.id)"
			            >
			              领取积分
			            </view><br>
			            <view
			              class="task_list_btn01"
			              v-show="item.isDone == 0 && item.channelName == '完成实名认证'"
			               @click="goPage('pagesA/user/certIput')"
			            >
			              去完成
			            </view>
			            <view
			              class="task_list_btn01"
			              v-show="
			                item.isDone == 0 && item.channelName == '首次购买熊猫代理产品'
			              "
						  @click="goPage2('pages/buy/buy')"
			            >
			              去完成
			            </view>
			            <view
			              class="task_list_btn01"
			              v-show="item.isDone == 0 && item.channelName == '邀请好友'"
			              @click="goPage('pagesA/user/invite')"
			            >
			              去完成
			            </view>
			            <view
			              class="task_list_btn01"
						  v-show="item.isDone == 0 && item.channelName == '浏览产品介绍页'"
						  @click="goPage('pages/index/efficientAgent')"
			            >
			              去完成
			            </view>
			            <view class="task_list_btn02" v-show="item.isDone == 2">已完成</view>
			          </view>
			        </view>
			      </view>
			    </view>
			  </view>
			</view>      
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				task:[],
				amount02:'',
				amount:3,
				left:"0%",
				moneyInt:1,
				baidu:true,
			};
		},
		onShow() {
			this.getTaskList()
			this.rechargeIsReceive()
			this.thisMonthMoney()
			// #ifdef MP-BAIDU
			this.baidu=false
			// #endif
			},
		methods: {
			rechargeIsReceive(){
				let that=this
				that.$store
					.dispatch("RechargeIsReceive")
					.then((response) => {
						let data = response.data;
						if (data.code == "0") {
						   that.moneyInt = data.obj;
							console.log(data);
						}        
					})
			},
			thisMonthMoney(){
				let that=this
				that.$store
					.dispatch("ThisMonthMoney")
					.then((response) => {
						let data = response.data;
						if (data.code == "0") {
							let tar = Number(data.obj);
							that.amount02 = Number(data.obj);
							if (tar >= 0 && tar < 1000) {
							  that.amount = 3;
							  that.left=(that.amount-3).toFixed(0) + '%'
							} else if (tar >= 1000 && tar < 3000) {
							  that.amount = 8;
							  that.left=(that.amount-3).toFixed(0) + '%'
							} else if (tar >= 3000 && tar < 5000) {
							  that.amount = 22;
							  that.left=(that.amount-3).toFixed(0) + '%'
							} else if (tar >= 5000 && tar < 10000) {
							  that.amount = 36;
							  that.left=(that.amount-3).toFixed(0) + '%'
							} else if (tar >= 10000 && tar < 30000) {
							  that.amount = 48;
							  that.left=(that.amount-3).toFixed(0) + '%'
							} else if (tar >= 30000 && tar < 50000) {
							  that.amount = 62;
							  that.left=(that.amount-3).toFixed(0) + '%'
							} else if (tar >= 50000 && tar < 100000) {
							  that.amount = 74;
							  that.left=(that.amount-3).toFixed(0) + '%'
							} else if (tar >= 100000) {
							  that.amount = 88;
							  that.left=(that.amount-3).toFixed(0) + '%'
							} else {
							  that.amount = 96;
							  that.left=(that.amount-3).toFixed(0) + '%'
							}  
							console.log(that.left);
						}        
					})
			},
			getTaskList(){
				let that=this
				that.$store
					.dispatch("GetTaskList")
					.then((response) => {
						let data = response.data;
						if (data.code == "0") {
						    that.task = data.obj;
						}        
					})
			},
			goPage(e){
				uni.navigateTo({
					url: `/${e}`
				})
			},
			goPage2(e){
				uni.switchTab({
					url: `/${e}`
				})
			},
			receivePoints(num, row) {
			      let that = this;
			      let tar = that.pointsDay + 1;
			      let obj;
			      if (num == 1) {
			        obj = {
			          signInDay: tar,
			        };
			      }
			      if (num == 2) {
			        obj = {
			          channelId: row,
			        };
			      }
			      if (num == 3) {
			        obj = {
			          rechargeSum: that.amount02,
			        };
			      }
				  that.$store
				  	.dispatch("ReceivePoints",obj)
				  	.then((response) => {
				  		let data = response.data;
						console.log(data);
				  		if (data.code == "0") {
				  		    if (num == 1) {
								that.getDay();
								that.getUserPoints();
								// that.getSignInDayTime();
				  		      setTimeout(() => {
				  		        that.sign_suss = true;
				  		      }, 300);
				  		    }
				  		    if (num == 2) {
				  		      that.getTaskList();
				  		      that.getUserPoints();
				  		    }
				  		    if (num == 3) {
				  		      that.rechargeIsReceive();
				  		      that.getUserPoints();
				  		    }        
				  		}        
				  	})
			    },	
		},
	}
</script>

<style lang="less">
#taskIntegral{
	background-color: #f6f8fa;
	overflow: hidden;
	.content{
		width: 92%;
		margin: 0 auto;
	}
	.integral_sign_con {
	  margin: 0 auto;
	  height: 100rpx;
	  line-height: 100rpx;
	  .integral_sign_text01 {
	    color: #324147;
	    font-size: 30rpx;
	    font-weight: bold;
	  }
	  .integral_sign_text02 {
	    color: #3f77ef;
	    font-size: 40rpx;
	    font-weight: bold;
	    padding: 0 4rpx;
	  }
	  .integral_sign_text03 {
	    // color: #999999;
	    font-size: 25rpx;
	    padding-left: 10rpx;
	  }
	}  
  .mySwiper_bg {
    background-color: #fff;
    margin: 0 auto;
    border-radius: 8px;
	// height: 520rpx;
	padding: 10rpx;
    .inter_list_center_text {
		overflow: hidden;
		width: 100%;
      .prace_list {
		  width: 100%;
        .pracez_num {
          display: inline-block;
          color: #324148;
          font-size:26rpx;
          width: 14%;
		  text-align: left;
        }
      }
      .prace_list02 {
        .pracez_num {
          color: #ff6a00;
          font-size: 20rpx;
        }
      }
      .block {
		  position: relative;
		  top: 5rpx;
		image{
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			top: -10rpx;
		}
      }
      .sign_btn {
        margin-top: 24px;
        .sign_btn_top {
          width: 200rpx;
          height: 66rpx;
          line-height: 66rpx;
          background-color: #3373fc;
          border: 2rpx solid #3373fc;
          text-align: center;
          color: #ffffff;
          font-size: 28rpx;
          cursor: pointer;
          float: right;
          border-radius: 100rpx;
        }
        .sign_btn_top01 {
          background-color: #e3e5ea;
          border: 2rpx solid #d9dee1;
          color: #a5a7aa;
        }
        .sign_btn_top03 {
          background-color: #e3e5ea;
          border: 2rpx solid #dadee1;
          color: #a5a8aa;
        }
      }
      .sign_btn02 {
        margin-top: 36rpx;
      }
      .inter_list_center_date {
        float: left;
        margin-left: 26rpx;
      }
      .inter_list_center_date:first-child {
        margin-left: 0px;
      }
      .inter_list_center_date:last-child {
        .now_date_add::after {
          content: "";
          position: absolute;
          width: 0;
        }
      }
      .now_date {
        font-size: 24rpx;
        color: #334248;
        text-align: center;
      }
      .now_date_stute {
        margin-top: 20rpx;
      }
      .now_date_add::after {
        content: "";
        position: absolute;
        width: 30rpx;
        height: 2rpx;
        background-color: #ffe6d4;
        right: -30rpx;
        top: 22rpx;
      }
      .now_date_add {
        position: relative;
        display: block;
        width: 40rpx;
        height: 40rpx;
        border-radius: 100rpx;
        font-size: 24rpx;
        color: #ff6a00;
        background-color: #ffe6d4;
        text-align: center;
        line-height: 40rpx;
        margin: 0 auto;
      }
      .now_date_img {
        position: relative;
        display: block;
        width: 20px;
        height: 20px;
        border-radius: 50px;
        background-color: #ff6e04;
        text-align: center;
        line-height: 24px;
        margin: 0 auto;
      }
    }
	.mySwiper_center {
	  margin: 0 auto;
	  .recharge_con {
	    width: 100%;
	    height: 100rpx;
	    line-height: 110rpx;
	    background-color: #016bff;
	    color: #fff;
	    font-size: 25rpx;
	    border-top-left-radius: 16rpx;
	    border-top-right-radius:16rpx;
	    .recharge_num {
	      padding-left: 20rpx;
	    }
	    .recharge_num02 {
	      float: right;
	      padding-right: 20rpx;
	    }
	  }
	  .integral_sign_con_right {
	    float: right;
	    padding-top: 10rpx;
	    .integral_sign_text01 {
	      color: #324147;
	      font-size: 25rpx;
	    }
	    .el-icon-arrow-right {
	      font-size: 25rpx;
	    }
	  }
	}
    .task_list {
		width: 100%;
		height: 100rpx;
      margin-bottom: 26rpx;
      .task_list_img {
        width:85rpx;
		height: 85rpx;
        float: left;
        image {
          width: 100%;
		  height: 100%;
        }
      }
      .task_list_add {
        float: left;
        margin-left: 15rpx;
        .task_list_name {
          color: #222222;
          font-size: 25rpx;
          margin-top: 8rpx;
        }
        .task_list_num {
          color: #ff6b05;
          margin-top: 10rpx;
        }
      }
      .task_list_right {
        float: right;
		line-height: 0rpx;
        .task_list_btn {
          background-color: #3373fc;
          color: #fff;
          width: 160rpx;
          height: 50rpx;
          line-height: 50rpx;
          text-align: center;
          border-radius: 100rpx;
          margin-top: 16rpx;
        }
        .task_list_btn02 {
          background-color: #c8ccd6;
          color: #fff;
          width: 150rpx;
          height: 60rpx;
          line-height: 60rpx;
          text-align: center;
          border-radius: 100rpx;
          margin-top: 20rpx;
        }
        .task_list_btn01 {
          border: 2rpx solid #0069ff;
          color: #0069ff;
          width: 150rpx;
          height: 60rpx;
          line-height: 60rpx;
          text-align: center;
          border-radius: 100rpx;
          margin-top: 20rpx;
        }
      }
    }		
	}
}
</style>
